'use strict';
import React, {Component} from 'react';
import {
    StyleSheet,
    Text,
    View,
    Modal,
    TouchableNativeFeedback, TouchableHighlight,
} from 'react-native';
import * as Color from "../../constant/Color";

/** 封装高亮按钮 */
export default class TouchButton extends Component{
    constructor(props){
        super();
        this.state={
            disabled : props.disabled,
        }
    }

    render(){
        return(
            <TouchableHighlight
                style={[this.state.disabled ? styles.TouchDisable : styles.TouchEnable, this.props.styleTouch]}
                activeOpacity={0.5}
                underlayColor={this.props.underlayColor ? this.props.underlayColor : '#a1a1a1'}
                disabled={this.state.disabled}
                onPress={() => {this.props.onPress() }}>
                <Text style={[this.state.disabled ? styles.TextDisable : styles.TextEnable, this.props.styleText]}>
                    {this.props.title}
                </Text>
            </TouchableHighlight>
        );
    }

    /** 设置是否可点击 */
    setDisable(isDisabled:boolean){
        this.setState({disabled : isDisabled})
    }
}

//样式定义
const styles = StyleSheet.create({
    TouchEnable:{
        paddingTop:2,
        paddingBottom:2,
        paddingLeft:4,
        paddingRight:4,
        borderColor: Color.white,
        borderWidth: 0,
        borderRadius: 4,
        backgroundColor: '#fff',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
    },
    TouchDisable:{
        paddingTop:2,
        paddingBottom:2,
        paddingLeft:4,
        paddingRight:4,
        borderColor: Color.white,
        borderWidth: 0,
        borderRadius: 4,
        backgroundColor: '#a1a1a1',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
    },
    TextEnable:{
        color:'#000'
    },
    TextDisable:{
        color:'#fff'

    },
});

